React Native Bridge এর মাধ্যমে Native Code এবং JS Code এর সংযোগ

React Native একটি ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্ক, যা আপনাকে JavaScript দিয়ে মোবাইল অ্যাপ্লিকেশন তৈরি করতে সহায়ক। তবে, কিছু ক্ষেত্রে Native Code এর ব্যবহার প্রয়োজন হতে পারে (যেমন ফাইল সিস্টেম অ্যাক্সেস, ক্যামেরা, সেন্সর ডেটা, পারফরম্যান্স-অভিযোজিত ফিচার ইত্যাদি)। এখানে React Native Bridge ব্যবহার করা হয়, যা Native Modules এবং JavaScript এর মধ্যে যোগাযোগ স্থাপন করে।

React Native Bridge মূলত JavaScript Thread এবং Native Modules (iOS এবং Android-এর মধ্যে) এর মধ্যে যোগাযোগের মাধ্যম হিসেবে কাজ করে। এটি Native কোড এবং JavaScript কোডের মধ্যে ডেটা এবং ফাংশন পাঠানোর জন্য প্রয়োজনীয় সেতু সরবরাহ করে।

React Native Bridge কীভাবে কাজ করে?

React Native এর Bridge একটি asynchronous communication model ব্যবহার করে, যা JavaScript Thread এবং Native Modules এর মধ্যে ডেটা এবং ফাংশন পাঠাতে সক্ষম করে।

React Native Bridge এর মূল কাঠামো:

1. JavaScript Thread: এটি হলো React Native অ্যাপ্লিকেশনের প্রধান থ্রেড, যা UI রেন্ডার এবং JS কোড এক্সিকিউট করে।
2. Native Thread: এটি হলো মূল native কোডের থ্রেড (iOS এর জন্য Objective-C/Swift, Android এর জন্য Java/Kotlin), যা native APIs এবং ডিভাইসের হার্ডওয়্যার অ্যাক্সেস করে।
3. Bridge: JavaScript এবং Native Thread এর মধ্যে যোগাযোগের মাধ্যম। এটি data transfer এবং function calls পরিচালনা করে।

JavaScript থ্রেড এবং Native থ্রেড একে অপরের সাথে Bridge এর মাধ্যমে যোগাযোগ করে। JavaScript থ্রেড যখন কোনো native কোড বা ফিচারের অনুরোধ করে, তখন এটি Bridge এর মাধ্যমে native থ্রেডে প্রেরিত হয়। native কোড তার কাজ শেষ করে পুনরায় Bridge এর মাধ্যমে JavaScript থ্রেডে ফিরে আসে।

React Native Bridge এর মাধ্যমে Native Code এবং JS Code সংযোগ

Step-by-Step Process:

1. Bridge Interface তৈরি করা: Native কোডে একটি Interface তৈরি করতে হবে, যা JavaScript থেকে কল করা যাবে।
2. Native Module তৈরি করা: Native কোডে একটি Module তৈরি করতে হবে যা JavaScript থ্রেড থেকে কল করা যাবে।
3. JavaScript থেকে Native Function কল করা: Native মডিউল থেকে ফাংশন বা ডেটা অ্যাক্সেস করতে JavaScript থেকে কল করতে হবে।
4. Callback ব্যবহার করা: Native কোড থেকে JavaScript থ্রেডে ডেটা বা ফলাফল পাঠানোর জন্য Callback ব্যবহার করা হয়।

1. Native Module তৈরি করা (iOS)

iOS এর জন্য Objective-C বা Swift ব্যবহার করে Native Module তৈরি করা যায়।

Example: iOS Native Module

1. Create a Native Module:
   • প্রথমে Objective-C ফাইলে একটি নতুন মডিউল তৈরি করুন, যেমন MyNativeModule.m।

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(MyNativeModule, NSObject)

RCT_EXTERN_METHOD(addNumbers:(NSInteger)a b:(NSInteger)b callback:(RCTResponseSenderBlock)callback)

@end

2. Implement the Native Functionality (Objective-C):

#import "MyNativeModule.h"

@implementation MyNativeModule

// This function will be called from JS code
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(addNumbers:(NSInteger)a b:(NSInteger)b callback:(RCTResponseSenderBlock)callback)
{
  NSInteger sum = a + b;
  callback(@[[NSNull null], @(sum)]);
}

@end

2. JavaScript Code থেকে Native Function কল করা

JavaScript কোডে NativeModules থেকে Native Module ফাংশন কল করতে হবে।

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.addNumbers(5, 7, (error, result) => {
  if (error) {
    console.error(error);
  } else {
    console.log('Sum:', result); // Output will be 'Sum: 12'
  }
});

3. Native Module তৈরি করা (Android)

Android এর জন্য Java/Kotlin ব্যবহার করে Native Module তৈরি করা হয়।

Example: Android Native Module

1. Create a Native Module:
   • Android এর MyNativeModule.java ফাইল তৈরি করুন।

package com.mynativeapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactMethod;

public class MyNativeModule extends ReactContextBaseJavaModule {

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "MyNativeModule";
    }

    @ReactMethod
    public void addNumbers(int a, int b, Callback callback) {
        int sum = a + b;
        callback.invoke(null, sum); // Calling the callback with result
    }
}

2. Register the Native Module:
   • Native module-কে রেজিস্টার করতে হবে।

package com.mynativeapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.ReactNativeHost;
import com.facebook.react.bridge.ReactPackage;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyNativePackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyNativeModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

3. JavaScript Code থেকে Native Function কল করা:

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.addNumbers(5, 7, (error, result) => {
  if (error) {
    console.error(error);
  } else {
    console.log('Sum:', result); // Output will be 'Sum: 12'
  }
});

React Native Bridge এর সুবিধা

1. Native Functionality Access: React Native Bridge আপনাকে native কোড থেকে অতিরিক্ত ফিচারগুলো অ্যাক্সেস করার সুযোগ দেয়, যা React Native নিজে সরাসরি সাপোর্ট নাও করতে পারে।
2. Performance: Native কোডের মাধ্যমে পারফরম্যান্স-সেনসিটিভ ফিচার তৈরি করা যায়, যেমন উচ্চ গ্রাফিক্স রেন্ডারিং বা সিগন্যাল প্রসেসিং।
3. Reuse Native Code: বিদ্যমান native কোড ব্যবহার করতে পারবেন, ফলে নতুন React Native অ্যাপে পুরনো কোড পুনঃব্যবহার করা সম্ভব।
4. Cross-Platform Development: Native কোডের মাধ্যমে আপনাকে iOS এবং Android উভয়ের জন্য একই ফিচার তৈরি করতে সহায়তা করে।

সারাংশ

• React Native Bridge আপনাকে Native Modules এবং JavaScript কোডের মধ্যে যোগাযোগ স্থাপন করতে সাহায্য করে।
• Native Code থেকে JavaScript-এ ডেটা পাঠানোর জন্য Bridge ব্যবহার করা হয়।
• React Native অ্যাপ্লিকেশনগুলোতে Native Modules যুক্ত করে আপনি native APIs এবং পারফরম্যান্স-অভিযোজিত ফিচারগুলিকে JavaScript থ্রেড থেকে অ্যাক্সেস করতে পারেন।

Bridge ব্যবহারের মাধ্যমে আপনি Native কোড এবং JavaScript কোডের মধ্যে সেতুবন্ধন তৈরি করে React Native অ্যাপ্লিকেশনগুলিকে আরও শক্তিশালী এবং পরিপূর্ণ করতে পারেন।